<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>高校智能网络安全培训系统</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link href="../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
    <link href="../static/css/style.min.css" th:href="@{/css/style.min.css}" rel="stylesheet"/>
    <style>
        .cyber-header {
            background: linear-gradient(135deg, #1a237e 0%, #0d47a1 100%);
            color: white;
            padding: 4rem 0;
            margin-bottom: 3rem;
            box-shadow: 0 4px 20px rgba(0,0,0,0.15);
            position: relative;
            overflow: hidden;
        }
        .cyber-header::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><rect fill="rgba(255,255,255,0.05)" x="0" y="0" width="100" height="100"/></svg>');
            opacity: 0.1;
        }
        .cyber-title {
            font-size: 3.5rem;
            font-weight: 700;
            text-align: center;
            margin: 0;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
            letter-spacing: 2px;
        }
        .cyber-subtitle {
            text-align: center;
            color: #e3f2fd;
            margin-top: 1.5rem;
            font-size: 1.4rem;
            letter-spacing: 1px;
        }
        .stats-section {
            background: #f8f9fa;
            padding: 3rem 0;
            margin-bottom: 3rem;
        }
        .stat-item {
            text-align: center;
            padding: 2rem;
        }
        .stat-number {
            font-size: 2.5rem;
            font-weight: 700;
            color: #1a237e;
            margin-bottom: 1rem;
        }
        .stat-label {
            color: #666;
            font-size: 1.1rem;
        }
        .feature-card {
            background: white;
            border-radius: 12px;
            padding: 2.5rem;
            margin-bottom: 2rem;
            box-shadow: 0 8px 20px rgba(0,0,0,0.1);
            transition: all 0.3s ease;
            height: 100%;
        }
        .feature-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 12px 30px rgba(0,0,0,0.15);
        }
        .feature-icon {
            font-size: 3rem;
            color: #1a237e;
            margin-bottom: 1.5rem;
        }
        .feature-title {
            font-size: 1.8rem;
            color: #1a237e;
            margin-bottom: 1.2rem;
            font-weight: 600;
        }
        .feature-description {
            color: #555;
            line-height: 1.8;
            font-size: 1.1rem;
        }
        .course-section {
            padding: 4rem 0;
            background: #fff;
        }
        .section-title {
            text-align: center;
            margin-bottom: 3rem;
            color: #1a237e;
            font-size: 2.5rem;
            font-weight: 600;
        }
        .course-card {
            background: #f8f9fa;
            border-radius: 10px;
            padding: 2rem;
            margin-bottom: 2rem;
            transition: all 0.3s ease;
        }
        .course-card:hover {
            background: #fff;
            box-shadow: 0 8px 20px rgba(0,0,0,0.1);
        }
        .course-title {
            font-size: 1.4rem;
            color: #1a237e;
            margin-bottom: 1rem;
            font-weight: 600;
        }
        .course-description {
            color: #666;
            line-height: 1.6;
        }
        .cyber-footer {
            background: #1a237e;
            color: white;
            padding: 3rem 0;
            margin-top: 4rem;
        }
        .footer-content {
            text-align: center;
        }
        .footer-title {
            font-size: 1.8rem;
            margin-bottom: 1.5rem;
        }
        .footer-text {
            color: #e3f2fd;
            line-height: 1.8;
        }
        .highlight-box {
            background: linear-gradient(135deg, #1a237e 0%, #0d47a1 100%);
            color: white;
            padding: 2rem;
            border-radius: 12px;
            margin: 2rem 0;
            text-align: center;
        }
        .highlight-title {
            font-size: 2rem;
            margin-bottom: 1rem;
        }
        .highlight-text {
            font-size: 1.2rem;
            line-height: 1.8;
        }
        .feature-grid {
            padding: 4rem 0;
            background: #f8f9fa;
        }
        .feature-item {
            background: white;
            border-radius: 12px;
            padding: 2rem;
            margin-bottom: 2rem;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
            transition: all 0.3s ease;
            height: 100%;
        }
        .feature-item:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 25px rgba(0,0,0,0.15);
        }
        .feature-icon-large {
            font-size: 3.5rem;
            color: #1a237e;
            margin-bottom: 1.5rem;
            text-align: center;
        }
        .feature-item-title {
            font-size: 1.6rem;
            color: #1a237e;
            margin-bottom: 1rem;
            text-align: center;
            font-weight: 600;
        }
        .feature-item-description {
            color: #555;
            line-height: 1.8;
            font-size: 1.1rem;
        }
        .feature-list {
            list-style: none;
            padding: 0;
            margin: 1rem 0;
        }
        .feature-list li {
            padding: 0.5rem 0;
            color: #555;
            font-size: 1.1rem;
            display: flex;
            align-items: center;
        }
        .feature-list li:before {
            content: '✓';
            color: #1a237e;
            font-weight: bold;
            margin-right: 0.5rem;
        }
    </style>
</head>

<body class="gray-bg">
    <div class="cyber-header">
        <div class="container">
            <h1 class="cyber-title">高校智能网络安全培训系统</h1>
            <p class="cyber-subtitle">打造专业、智能、高效的网络安全人才培养平台</p>
        </div>
    </div>

    <div class="stats-section">
        <div class="container">
            <div class="row">
                <div class="col-md-3">
                    <div class="stat-item">
                        <div class="stat-number">10+</div>
                        <div class="stat-label">专业课程</div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="stat-item">
                        <div class="stat-number">5+</div>
                        <div class="stat-label">合作院校</div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="stat-item">
                        <div class="stat-number">3+</div>
                        <div class="stat-label">培训方向</div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="stat-item">
                        <div class="stat-number">100%</div>
                        <div class="stat-label">系统可用性</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="container">
        <div class="row">
            <div class="col-md-4">
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="fa fa-shield"></i>
                    </div>
                    <h3 class="feature-title">专业培训体系</h3>
                    <p class="feature-description">构建完整的网络安全知识体系，涵盖网络攻防、安全运维、密码学、安全开发等多个方向，采用理论与实践相结合的教学模式，确保学员全面掌握专业技能。</p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="fa fa-laptop"></i>
                    </div>
                    <h3 class="feature-title">智能学习平台</h3>
                    <p class="feature-description">基于AI技术的智能学习系统，根据学员学习进度和特点，个性化推荐学习内容，实时跟踪学习效果，提供智能答疑和作业批改，打造高效的学习体验。</p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="fa fa-users"></i>
                    </div>
                    <h3 class="feature-title">实战演练环境</h3>
                    <p class="feature-description">提供真实的网络安全攻防演练平台，模拟各类网络攻击场景，让学员在实战中提升技能。定期组织CTF竞赛和攻防演练，培养实战能力。</p>
                </div>
            </div>
        </div>

        <div class="highlight-box">
            <h2 class="highlight-title">系统特色</h2>
            <p class="highlight-text">采用"理论+实践+竞赛"三位一体的培养模式，结合企业实际需求，打造全方位的网络安全人才培养体系</p>
        </div>

        <div class="course-section">
            <h2 class="section-title">核心课程体系</h2>
            <div class="row">
                <div class="col-md-4">
                    <div class="course-card">
                        <h3 class="course-title">网络安全基础</h3>
                        <p class="course-description">涵盖网络协议、操作系统安全、密码学基础等核心知识，为后续深入学习打下坚实基础。</p>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="course-card">
                        <h3 class="course-title">Web安全</h3>
                        <p class="course-description">深入讲解Web应用安全漏洞原理、渗透测试技术、安全开发实践等内容。</p>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="course-card">
                        <h3 class="course-title">安全运维</h3>
                        <p class="course-description">系统安全加固、安全监控、应急响应等运维技能培训，提升实战能力。</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="feature-grid">
        <div class="container">
            <h2 class="section-title">系统功能模块</h2>
            <div class="row">
                <div class="col-md-4">
                    <div class="feature-item">
                        <div class="feature-icon-large">
                            <i class="fa fa-graduation-cap"></i>
                        </div>
                        <h3 class="feature-item-title">在线学习管理</h3>
                        <p class="feature-item-description">提供全方位的在线学习解决方案</p>
                        <ul class="feature-list">
                            <li>课程内容在线学习</li>
                            <li>学习进度实时跟踪</li>
                            <li>在线作业提交与批改</li>
                            <li>学习资料下载管理</li>
                            <li>学习笔记与心得分享</li>
                        </ul>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="feature-item">
                        <div class="feature-icon-large">
                            <i class="fa fa-certificate"></i>
                        </div>
                        <h3 class="feature-item-title">证书管理</h3>
                        <p class="feature-item-description">专业的证书管理与认证体系</p>
                        <ul class="feature-list">
                            <li>证书申请与审核</li>
                            <li>证书在线验证</li>
                            <li>证书模板管理</li>
                            <li>证书发放与追踪</li>
                            <li>证书有效性验证</li>
                        </ul>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="feature-item">
                        <div class="feature-icon-large">
                            <i class="fa fa-pencil-square-o"></i>
                        </div>
                        <h3 class="feature-item-title">在线考试系统</h3>
                        <p class="feature-item-description">智能化的考试评估平台</p>
                        <ul class="feature-list">
                            <li>在线考试与测评</li>
                            <li>自动评分系统</li>
                            <li>考试防作弊机制</li>
                            <li>成绩分析与统计</li>
                            <li>考试题库管理</li>
                        </ul>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="feature-item">
                        <div class="feature-icon-large">
                            <i class="fa fa-users"></i>
                        </div>
                        <h3 class="feature-item-title">班级管理</h3>
                        <p class="feature-item-description">高效的班级组织与管理</p>
                        <ul class="feature-list">
                            <li>班级信息管理</li>
                            <li>班级课程安排</li>
                            <li>班级公告发布</li>
                            <li>班级活动组织</li>
                            <li>班级数据统计</li>
                        </ul>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="feature-item">
                        <div class="feature-icon-large">
                            <i class="fa fa-user-circle"></i>
                        </div>
                        <h3 class="feature-item-title">人员管理</h3>
                        <p class="feature-item-description">完善的人员信息管理</p>
                        <ul class="feature-list">
                            <li>用户信息管理</li>
                            <li>角色权限控制</li>
                            <li>学习档案管理</li>
                            <li>成绩档案管理</li>
                            <li>证书档案管理</li>
                        </ul>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="feature-item">
                        <div class="feature-icon-large">
                            <i class="fa fa-line-chart"></i>
                        </div>
                        <h3 class="feature-item-title">数据分析</h3>
                        <p class="feature-item-description">全面的数据统计与分析</p>
                        <ul class="feature-list">
                            <li>学习数据分析</li>
                            <li>考试成绩分析</li>
                            <li>证书统计报表</li>
                            <li>班级数据统计</li>
                            <li>系统使用分析</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="highlight-box">
        <h2 class="highlight-title">系统优势</h2>
        <p class="highlight-text">整合在线学习、考试测评、证书管理、班级管理等功能于一体，打造全方位的网络安全培训解决方案</p>
    </div>

    <footer class="cyber-footer">
        <div class="container">
            <div class="footer-content">
                <h3 class="footer-title">联系我们</h3>
                <p class="footer-text">致力于为高校培养优秀的网络安全人才，打造国内领先的网络安全培训平台</p>
                <p class="footer-text">© 2024 高校智能网络安全培训系统 - 版权所有</p>
            </div>
        </div>
    </footer>

    <script th:src="@{/js/jquery.min.js}"></script>
    <script th:src="@{/js/bootstrap.min.js}"></script>
    <script th:src="@{/ajax/libs/layer/layer.min.js}"></script>
</body>
</html>
